<template>
  <div class="order-comment-container">
    <div>
      <el-table :data="commentData" style="width:100%" stripe>
        <el-table-column label="商品图片" align="center">
          <template slot-scope="scope">
            <l-pic :picurl="scope.row.pic_url" :size="{width:40,height:40}" :disdel="false" :disview="false"/>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="商品名称" align="center"></el-table-column>
        <el-table-column prop="content" label="评价内容" align="center"></el-table-column>
        <el-table-column label="评论图片" align="center">
          <template slot-scope="scope">
            <div v-if="scope.row.pics_url!==''">            
              <l-pic v-for="(item, index) in scope.row.pics_url.split(',')" :key="index"
                :picurl="item" :size="{width:40,height:40}" :disdel="false" :disview="false"/>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="显示状态" align="center">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.status" active-color="#13ce66" @change="updateStatus(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button class="action-button" 
              @click="del(scope.row)" type="text">
              <svg-icon icon-class="shanchu"/>
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div style="text-align:right;margin:15px 15px">
      <el-pagination class="page"
        background
        layout="total, prev, pager, next, jumper"
        :total="count"
        :page-size="10"
        :current-page="page"
        @size-change="changePage"
        @current-change="changePage">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getOrderComment, putOrderComment, delOrderComment } from '@/api/order'
import LPic from '@/components/lPic'

export default {
  name: 'orderComment',
  components: {
    LPic
  },
  data() {
    return {
      commentData: [],

      page: 1,
      count: 1,
    }
  },
  mounted() {
    this.getOrderComment();
  },
  methods: {
    /**
     * 获取评价列表
     */
    getOrderComment() {
      const params = {
        key: this.$store.state.app.activeApp.saa_key,
        page: this.page,
        limit: 10
      };
      getOrderComment(params).then(response => {
        if(response.status === 200){
          this.commentData = response.data;
          this.count = parseInt(response.count);
          this.commentData.forEach(item => {
            item.status = item.status === '1' ? true : false;
          })
        }else if(response.status === 204){
          this.commentData = [];
        }else{
          this.$message.error(response.message);
        }
      })
    },
    /**
     * 修改评价显示状态
     */
    updateStatus(data) {
      const params = { id: data.id, key: this.$store.state.app.activeApp.saa_key, status: data.status ? '1' : '0' };
      putOrderComment(params).then(response => {
        if(response.status === 200){
          this.getOrderComment();
          this.$message.success('更新成功！');
        }else{
          this.$message.error(response.message);
        }
      })
    },
    /**
     * 删除评价
     */
    del(data) {
      const params = { id: data.id, key: this.$store.state.app.activeApp.saa_key };
      delOrderComment(params).then(response => {
        if(response.status === 200){
          this.getOrderComment();
          this.$message.success('删除成功！');
        }else{
          this.$message.error(response.message);
        }
      })
    },
    /**
     * 翻页
     */
    changePage(page) {
      this.page = page;
      this.getOrderComment();
    }
  },
}
</script>

<style lang="scss" scoped>
.order-comment-container{
  min-height: calc(100vh - 100px);
  margin: 20px;
  background-color: #fff;
  padding:25px;
  box-shadow: 0px 0px 4px 0px rgba(115, 115, 115, 0.2);
} 
</style>